<template>
  <div class="base-container">
    <el-form
      ref="toolQuery"
      :model="toolQuery"
      :rules="toolQueryRules"
      size="medium"
      label-width="100px"
      v-show="toolQueryVisiable"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="角色名" prop="name" label-width="60px">
            <el-input
              v-model="toolQuery.name"
              placeholder="请输入角色名"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="toolQuery.status" size="mini">
              <el-radio-button
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="initData" size="small"
            >提交</el-button
          >
          <el-button @click="resetForm" size="small">重置</el-button>
        </el-col>
      </el-row>
      <el-form-item size="large"> </el-form-item>
    </el-form>
    <toolBar
      :tableColumnConfig="tableColumnConfig"
      :checkedRow="checkedRow"
      :dataList="dataList"
      @edit="edit"
      @del="del"
      @add="openAdd"
    ></toolBar>
    <el-table
      :data="processData"
      style="width: 100%"
      @selection-change="selectionChangeHandle"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <template v-for="(item, index) in cptColumn">
        <el-table-column :key="index" :prop="item.prop" :label="item.label" />
      </template>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.page"
      :page-sizes="[5, 10, 20, 400]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.totalRow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <detail
      ref="detail"
      :dialogTitle="dialogTitle"
      @addHandle="add"
      @editHandle="edit"
    ></detail>
  </div>
</template>

<script>
import curd from "@/mixins/curd";
import detail from "./component/detail";

import toolBar from "@/components/common/toolBar";
const CURD = new curd({
  url: "/sys/role/"
});
export default {
  mixins: [CURD],
  components: { toolBar, detail },
  data() {
    return {
      // 列表配置
      tableColumnConfig: [
        { id: 1, label: "角色名", prop: "name", show: true },
        { id: 2, label: "状态", prop: "status", show: true },
        { id: 3, label: "创建时间", prop: "created", show: true },
        { id: 4, label: "更新时间", prop: "updated", show: true },
        { id: 5, label: "备注", prop: "remark", show: true }
      ],
      toolQuery: {
        name: undefined,
        status: 1
      },
      toolQueryRules: {
        name: [],
        status: []
      },
      statusOptions: [
        {
          label: "开启",
          value: 1
        },
        {
          label: "禁用",
          value: 2
        }
      ]
    };
  },
  methods: {
    // 打开编辑弹窗
    openEdit(obj) {
      this.$refs["detail"].dialogVisible = true;
      const from = JSON.parse(JSON.stringify(obj));
      from.status == "启用" ? (from.status = 1) : (from.status = 0);
      console.log(from);
      this.dialogTitle = `修改`;
      this.$refs["detail"].isAdd = false;
      this.$refs["detail"].formData = from;
    },
    // 打开添加弹窗
    openAdd() {
      this.$refs["detail"].dialogVisible = true;
      this.$refs["detail"].isAdd = true;
      this.$refs["detail"].formData = {
        name: "",
        perms: "",
        status: 0,
        menuUid: [],
        remark: "",
        defaultChecked: []
      };
    },
    // 顶部查询栏
    submitForm() {
      this.$refs["toolQuery"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["toolQuery"].resetFields();
    }
  },
  computed: {
    processData() {
      return this.dataList.map(item => {
        ["status"].forEach(option => {
          item[option] ? (item[option] = "启用") : (item[option] = "禁用");
        });
        return item;
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/styles/base/index.scss";
</style>
